<template>
  <div class="profile-page">
    <!-- <div class="profile-page"> -->
    <section class="section-profile-cover section-shaped my-0">
      <div class="shape shape-style-1 shape-primary shape-skew alpha-4">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div v-if="showError" class="contentDiv">
        <base-alert type="danger">
          {{errorMsg}}
        </base-alert>
      </div>
      <div v-if="showInfo" class="contentDiv">
        <base-alert class="col-md-6" type="dark">
          {{infoMsg}}
        </base-alert>
      </div>
    </section>
    <section class="section section-skew">
      <!-- <b-container> -->
        <div class="row justify-content-center">
          <div style="width:340px; bottom:200px ; right:5px; position: fixed;">
            <card type="secondary" shadow>
              <div class="card-profile-actions py-4 mt-lg-0">
                <div style="align-content: center">
                  <form role="form">
                    <div class="row" v-if="isCustomerService">
                      <div class="col-md-12">
                        <base-input v-model="ruleForm.email" addon-left-icon="ni ni-email-83" placeholder="房客邮箱"></base-input>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <base-input v-model="ruleForm.personCount" @input="oninputNM" addon-left-icon="ni ni-single-02" placeholder="房客数量"></base-input>
                      </div>
                    </div>
                    <div class="row">
                      <div class="col-md-12">
                        <base-input v-model="ruleForm.phoneNum"
                                    :error="phoneNumError"
                                    @change="phoneNumError=''"
                                    addon-left-icon="ni ni-mobile-button"
                                    placeholder="手机号码"></base-input>
                      </div>
                    </div>
                    <div class="row justify-content-center mb-3">
                      <base-radio
                        name="radio0"
                        class="mr-3 float-right"
                        v-model="ruleForm.rentType"
                      >长租</base-radio>
                      <base-radio
                        name="radio1"
                        class="mr-3 float-right"
                        v-model="ruleForm.rentType"
                      >短租</base-radio>
                    </div>
                    <div class="col-md-11 mt-10 mt-md-3">
                      <div class="input-daterange datepicker row align-items-center">
                        <div class="col">
                          <base-input addon-left-icon="ni ni-calendar-grid-58">
                            <flat-picker
                              slot-scope="{focus, blur}"
                              @on-open="focus"
                              @on-close="blur"
                              :config="{allowInput: true, mode: 'range',}"
                              class="form-control datepicker"
                              v-model="dates.range"
                            ></flat-picker>
                          </base-input>
                        </div>
                      </div>
                    </div>
                    <div class="text-center">
                      <base-button @click="gotoRent" type="info" size="medium" class="mr-4">{{submitText}}</base-button>
                    </div>
                  </form>
                </div>
              </div>
            </card>
          </div>
        </div>
        <card shadow class="card-profile mt--300 ml-3" style="margin-right:350px" no-body>
          <div class="px-4">

            <div class="row justify-content-center">
              <div class="col-lg-12 order-lg-1">
                <div class="d-flex justify-content-center">
                  <div>
                    <b-carousel
                      id="carousel-fade"
                      style="text-shadow: 0px 0px 2px #000"
                      fade
                      indicators
                      background="#ababab"
                    >
                      <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.hdata.photos? this.GLOBAL.BASE_URL + this.hdata.photos[0]: '/img/房屋1.jpeg'" />
                      </b-carousel-slide>
                      <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.hdata.photos && this.hdata.photos.length>1 ? this.GLOBAL.BASE_URL + this.hdata.photos[1]: '/img/房屋1.jpeg'" />
                      </b-carousel-slide>
                      <b-carousel-slide>
                        <img slot="img" width="400" height="300" :src="this.hdata.photos && this.hdata.photos.length>2 ? this.GLOBAL.BASE_URL + this.hdata.photos[2]: '/img/房屋1.jpeg'" />
                      </b-carousel-slide>
                    </b-carousel>
                  </div>

                  <div style="width:200px;height:300px">
                    <img width="200" height="150" :src="this.hdata.photos && this.hdata.photos.length>1 ? this.GLOBAL.BASE_URL + this.hdata.photos[1]: '/img/房屋1.jpeg'" />
                    <img width="200" height="150" :src="this.hdata.photos && this.hdata.photos.length>2 ? this.GLOBAL.BASE_URL + this.hdata.photos[2]: '/img/房屋1.jpeg'" />
                  </div>
                  <div style="width:200px;height:300px">
                    <img width="200" height="150" :src="this.hdata.photos && this.hdata.photos.length>1 ? this.GLOBAL.BASE_URL + this.hdata.photos[3]: '/img/房屋1.jpeg'" />
                    <img width="200" height="150" :src="this.hdata.photos && this.hdata.photos.length>2 ? this.GLOBAL.BASE_URL + this.hdata.photos[4]: '/img/房屋1.jpeg'" />
                  </div>
                </div>
              </div>
            </div>
            <div></div>
            <div class="text-center mt-5">
              <h3>{{hdata.title}}</h3>
              <div class="h6 font-weight-300">
                <i class="ni ni-building location_pin mr-2">&nbsp;&nbsp;{{hdata.layout}}</i>
              </div>
              <div class="h6 font-weight-300">
                <i class="fa fa-circle location_pin mr-2">面积：{{hdata.area}}㎡</i>
              </div>
              <div class="h6 font-weight-300">
                <i class="fa fa-building location_pin mr-2">楼层：{{hdata.floor}}层</i>
              </div>
              <div class="h6 font-weight-300">
                <i v-if="hdata.rentalmethod === 'shortr'" class="fa fa-tag location_pin mr-2">类型：短租</i>
                <i v-else class="fa fa-tag location_pin mr-2">类型：长租</i>
              </div>
              <div class="h6 font-weight-300">
                <i v-if="hdata.rentalmethod === 'shortr'" class="fa fa-money location_pin mr-2">价格：￥{{hdata.price}}/日</i>
                <i v-else class="fa fa-money location_pin mr-2">价格：￥{{hdata.price}}/月</i>
              </div>
              <div class="h6 font-weight-300">
                <i v-if="hdata.roomStatus === 'enable'" class="fa fa-info-circle location_pin mr-2">状态：可租</i>
                <i v-else-if="hdata.roomStatus === 'applied'" class="fa fa-info-circle location_pin mr-2">状态：审核中</i>
                <i v-else-if="hdata.roomStatus === 'leased'" class="fa fa-info-circle location_pin mr-2">状态：已租出</i>
                <i v-else class="fa fa-info-circle location_pin mr-2">状态：停租</i>
              </div>
              <div class="h6 mt-4">
                <i class="ni ni-pin-3 business_briefcase-24 mr-2"></i> 详细地址：{{hdata.address}}
              </div>
              <div class="h6 mt-2">
<!--                <badge type="success">4.9分·36条评论</badge>-->
<!--                <badge type="danger">超赞房东</badge>-->
                <badge v-for="(tag,index) in hdata.tags" :key="index" type="primary">{{tag}}</badge>
              </div>
            </div>
            <div class="mt-5 py-5 border-top text-center">
              <div class="row justify-content-center">
                <div class="col-lg-9">
                  <h5>具体描述</h5>
                  <!-- <a href="#">展开</a> -->
                  <p v-for="(line,index) in (hdata.description || '').split('\n')" :key="index">{{line}}</p>
                </div>
              </div>
            </div>
          </div>
        </card>
      <!-- </b-container> -->
    </section>
  </div>
  <!-- </div> -->
</template>
<script>
import flatPicker from "vue-flatpickr-component";
import "flatpickr/dist/flatpickr.css";
import {checkCookie, getHomeInfo, rentHouse} from "../api";
import {checkPhoneNum} from "../utils/regjudge";

export default {
  components: {
    flatPicker
  },
  data() {
    return {
      role:'',
      showError: false,
      errorMsg: '',
      showInfo: false,
      infoMsg: '',
      phoneNumError: '',
      dates: {},
      isCustomerService:false,
      radio: {
        radio1: "radio1",
        radio2: "radio3"
      },
      hdata : '',
      ruleForm:{
            email: '',
            personCount: '',
            phoneNum: '',
            rentType: '短租'
      },
      submitText: '立即预约'
    };
  },
  methods: {
    message(msg){
      this.showError = true;
      this.errorMsg = msg;
    },
    goPage(page) {
      if (page === -1){
        this.$router.go(-1);
      } else {
        this.$router.push({name:page});
      }
    },
    getHouseDetail(){
      if (!this.$route.params.hid){
        this.$router.push("/");
      } else {
        getHomeInfo(this.$route.params.hid)
                .then(res => {
                  if (res.code === "1"){
                    this.hdata = res.data;
                    console.log();
                  } else {
                    this.message("获取房源信息失败，请退出重试:(");
                    setTimeout(() => {this.goPage(-1)}, 2000);
                  }
                }).catch(err => {
          this.message(err);
        })
      }
    },
    oninputNM(){
      // 非负整数
      let value = this.ruleForm.personCount;
      this.ruleForm.personCount = (value.match(/^\d*(\.?)/g)[0]) || null;
    },
    gotoRent(){
        this.showError = false;
        this.submitText = '预约中……';
        let param = {
            hid: this.hdata.id
        };
        if (this.ruleForm.phoneNum)
        {
            if (checkPhoneNum(this.ruleForm.phoneNum))
            {
                param.phoneNum=this.ruleForm.phoneNum;
            } else {
                this.phoneNumError = "请填写正确的电话号码!";
                this.submitText = '立即预约';
                return false;
            }
        }
        if (this.ruleForm.email){
            param.email = this.ruleForm.email;
        }
        if (this.ruleForm.personCount){
            param.personCount = this.ruleForm.personCount;
        }
        if (this.ruleForm.rentType === '长租'){
          param.rentalmethod = 'longr';
        } else {
          param.rentalmethod = 'shortr';
        }
        if (!this.dates.range){
          this.message("请选择租赁时间段");
          this.submitText = '立即预约';
          return false;
        } else {
          param.beginTime = this.dates.range.substring(0,10);
          param.endTime  = this.dates.range.substring(14,24);
        }
        rentHouse(param)
        .then(res=>{
          if (res.code === "1"){
            this.goPage("check-manage");
          } else {
            this.message("预约失败:" + res.msg);
            this.submitText = '立即预约';
            return false;
          }
        }).catch(err=>{
          this.message(err);
          this.submitText = '立即预约';
        })
    }
  },
  created(){
    this.getHouseDetail();
    checkCookie().then(res=>{
      this.role=res.data;
      if(this.role==='admin'){
        this.isCustomerService=true;
      }
    });
  },
  watch:{
    "$route": "getHouseDetail"
  }
};
</script>

<style>
.contentDiv {
  margin-left: 40px;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: auto;
}
</style>
